<script>
import ListArea from "@/components/ListArea.vue";
import FilterArea from "@/components/FilterArea.vue";
import mixins from "@/assets/js/mixins.js";
export default {
  name: "Index",
  mixins:[mixins],
  components: {FilterArea, ListArea},
  data() {
    return {
      user:{
        name:'',
        level:''
      }
    }
  },
  methods:{
    onReset(){
      this.user.name = "";
      this.user.level = "";
    }
  }

}
</script>

<template>
  <transition name="slide">
    <FilterArea @onSearch="onSearch(user)" @onReset="onReset"  v-if="showFilterArea">
      <template #inputBox>
        <div class="area flex-rcs">
          <label>用户名</label>
          <el-input v-model="user.name" placeholder="请输入相关资源的标题"/>
        </div>
        <div class="area flex-rcs">
          <label>用户类型</label>
          <el-select v-model="user.level" placeholder="请选择用户类型">
            <el-option label="普通用户" value="normal"></el-option>
            <el-option label="月度用户" value="month"></el-option>
            <el-option label="季度用户" value="season"></el-option>
            <el-option label="年度用户" value="year"></el-option>
            <el-option label="永久用户" value="forever"></el-option>
          </el-select>
        </div>
      </template>
    </FilterArea>
  </transition>
  <ListArea list-url="/resource/edit"
            list-title="资源" @create="onCreate" @handleFilter="handleFilter">
    <template #table-list>
      <el-table :data="list.tableData">
        <el-table-column label="" type="selection" width="80"></el-table-column>
        <el-table-column label="资源标题" prop="subject" ></el-table-column>
        <el-table-column label="资源分类" prop="category" ></el-table-column>
        <el-table-column label="资源热度" prop="resourceHot" ></el-table-column>
        <el-table-column label="资源状态" prop="status" ></el-table-column>
        <el-table-column label="创建时间" prop="createTime" ></el-table-column>
        <el-table-column label="操作" >
        </el-table-column>
      </el-table>
    </template>
  </ListArea>
</template>

<style scoped>

</style>
